﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>案例</title>
</head>

<body>
  <form>
    <input type="text" class="name"><br>
    <input type="text" class="tel"><br>
    <input type="text" class="emaill"><br>
    <input type="submit" class="save">
  </form>
  <table border="1">

    <thead>
      <tr>
        <td>姓名</td>
        <td>电话</td>
        <td>邮箱</td>
        <td>功能</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>aa</td>
        <td>aa</td>
        <td>aa</td>
        <td>
          <button>删除</button>
          <button>修改</button>
        </td>
      </tr>
    </tbody>
  </table>
</body>
<script src="../../lib/jquery/jquery-1.12.4.min.js"></script>
<script>
  $('.save').on('click', function (e) {
    console.log(e)
    // preventDefault 阻止默认事件
    e.preventDefault();
    var obj = {
      name: $('.name').val(),
      tel: $('.tel').val(),
      email: $('.email').val()
    }
    var all = localStorage.getItem('list')
    if (all) {
      all = JSON.parse(all);
      all.push(obj);
      localStorage.setItem('list', JSON.stringify(all));
    } else {
      localStorage.setItem('list', JSON.stringify([obj]));
    }
    console.log(localStorage)
  })

</script>

</html>
